<template>
  <div class="echart-container" ref="pieEchart"></div>
</template>

<script>
import {countPieJump} from "@/api/home";

export default {
  props: {
    optionData: {
      type: Object,
      default: () => {
        return {};
      },
    },
    startTime: {
      type: Number,
      default: 0
    },
    endTime: {
      type: Number,
      default: 0
    }
  },
  mounted() {
    this.myChart = this.$echarts.init(this.$refs.pieEchart);
    this.$watch(
      "optionData",
      () => {
        this.initChart();
      },
      {
        deep: true,
      }
    );
  },

  methods: {
    initChart() {
      let option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          right:
            (this.optionData.right && `${this.optionData.right}px`) || "10px",
          top: (this.optionData.top && `${this.optionData.top}px`) || "80px",
          textStyle: this.optionData.textStyle || {
            fontSize: 18, //字体大小
            color: "#949BA4",
          },
          formatter: function (name) {
            let data = option.series[0].data
            // console.log(data, 'data')
            // let total = 0
            let tarValue
            for (let i = 0; i < data.length; i++) {
              // total += data[i].value
              if (data[i].name == name) {
                tarValue = data[i].value
              }
            }
            let v = tarValue
            // let p = Math.round((tarValue / total) * 100) //占比
            return `${name}         ${v}`
          }
        },
        color: this.optionData.color || ["#58EEF2", "#63ACFF", "#AF81FF"],
        series: [
          {
            // name: "Access From",
            type: "pie",
            // radius: "50%",
            // radius: this.optionData.radius || ["40%", "70%"], //["40%", "70%"],
            label: {
              show: true,
              // position: "top",
              formatter: '{d}%',// 显示柱子对应的数据值
              textStyle: {
                color: "#5CFBFF", // 修改字体颜色为红色
                fontSize: 18, // 修改字体大小为12px
              },
            },
            data: this.optionData.data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      this.myChart.setOption(option);
      this.myChart.dispatchAction({
        //type: 'highlight',//突出高亮显示;
        seriesIndex: 0,
        dataIndex: 0
      });

      // 点击 携带参数 跳转
      // .off('click') 防止触发两次
      this.myChart.off('click').on('click', (params) => {
        let data = {
          str: params.name,
          startTime: '0',
          endTime: '100'
        }
        // 返回该频次段的图片信息 跳转到指定页面展示
        this.jumpSpecifyCount(data);
      })

    },
    async jumpSpecifyCount (data) {
      const that = this;
      let res = await countPieJump({
        str:data.str,
        startTime:this.startTime.toString(),
        endTime:this.endTime.toString()
      });
      if(res.code === 200) {
        console.log('res.data', res.data)
        // 跳转展示页面
        that.$emit("showFrequencyCount",{str:data.str, count:res.data.length, data:res.data});
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.echart-container {
  width: 100%;
  height: 100%;
}
</style>